<template>
  <div class="app-container">
    <div class="filter-container flexswbt">
      <div></div>
      <div style="display: flex">
        <el-button
          class="filter-item"
          type="success"
          icon="el-icon-plus"
          @click="clickadd"
          >添加</el-button
        >
      </div>
      <!-- 列表 -->
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        align="center"
        prop="id"
        label="任务id"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="title"
        label="标题"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="content"
        label="描述"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="username"
        label="指派给"
        min-width="100"
      />
      <el-table-column align="center" label="状态" width="150">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.feekbackStatus * 1 === 1"
            type="success"
            size="small"
            >已反馈</el-tag
          >
          <el-tag v-else type="danger" size="small">未反馈</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="startTime"
        label="指派时间"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="feekbackTime"
        label="反馈时间"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="endTime"
        label="结束时间"
        min-width="100"
      />
      <!--  -->
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="250"
        class-name="small-padding"
      >
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="clickfankui(scope.row)">
            详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getdata"
    />

    <!-- 创建任务弹窗 -->
    <el-dialog title="发布任务" :visible.sync="dialogFormVisible" width="80%">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="120px"
        label-position="left"
      >
        <el-form-item label="任务标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="任务详情" prop="context">
          <el-input
            type="textarea"
            v-model="form.context"
            placeholder="请输入详情"
          ></el-input>
        </el-form-item>

        <el-form-item label="附件" prop="url">
          <el-upload
            ref="upload"
            :action="updatepath"
            :headers="headers"
            name="files"
            accept="*"
            :limit="1"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :before-remove="beforeremove"
          >
            <div style="display: flex; margin-top: 10px">
              <el-button size="small" type="primary" :loading="updateing"
                >点击上传</el-button
              >
              <div style="width: 10px"></div>
              <div slot="tip" class="el-upload__tip">
                <!-- 只能上传mp4格式的视频或pdf文件 -->
              </div>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="指派给" prop="selectuser">
          <el-cascader
            :show-all-levels="false"
            v-model="form.selectuser"
            :options="userlist"
            :props="{ expandTrigger: 'hover', label: 'name', value: 'id' }"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="结束日期" prop="endTime">
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 任务详情 -->
    <el-dialog title="任务详情" :visible.sync="dialogForminfo" width="80%">
      <taskinfo
        :clickinfo="clickinfo"
        @clicksure="dialogForminfo = false"
      ></taskinfo>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import { getOrgTree } from "@/api/user";
import { save, list, taskfeekbacklist } from "@/api/task";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import taskinfo from "@/views/component/taskinfo"; // Secondary package based on el-pagination

import dayjs from "dayjs";
const defavalue = {
  title: "",
  context: "",
  filename: "",
  fileurl: "",
  selectuser: null,
  endTime: new Date(dayjs(new Date()).format("YYYY-MM-DD 23:59:59")),
};
export default {
  components: { Pagination, taskinfo },
  computed: {
    ...mapGetters(["uid", "updatepath", "token"]),
  },
  filters: {},
  data() {
    return {
      dialogForminfo: false,
      userlist: [],
      listQuery: {
        pageNo: 1,
        pageSize: 20,
      },
      listLoading: false,
      total: 0,
      list: [],
      form: {
        id: "",
        title: "",
        context: "",
        filename: "",
        fileurl: "",
        selectuser: null,
        endTime: new Date(dayjs(new Date()).format("YYYY-MM-DD 23:59:59")),
      },
      updateing: false,
      dialogFormVisible: false,
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        context: [{ required: true, message: "请输入详情", trigger: "blur" }],
        selectuser: [
          { required: true, message: "请选择指派人员", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请选择结束时间", trigger: "blur" },
        ],
      },
      clickinfo: {},
      fankinfo: {},
      headers: {},
    };
  },

  created() {
    this.headers = {
      token: this.token,
    };
    this.getuserlist();
    this.getdata();
  },
  methods: {
    getdata() {
      this.listLoading = true;
      let data = { ...this.listQuery, creater: this.uid };
      list(data).then((res) => {
        this.list = res.data.records;
        this.total = res.data.total;
        this.listLoading = false;
        console.log(this.list);
      });
    },
    // 获取用户列表
    getuserlist() {
      getOrgTree({}).then((res) => {
        this.userlist = this.threechildren(res.data);
        console.log(this.userlist);
        // x
      });
    },
    threechildren(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].children.length) {
          this.threechildren(data[i].children);
        }
        if (data[i].userList.length) {
          let arr = [...data[i].userList, ...data[i].children];
          data[i].children = arr;
        }
      }
      return data;
    },
    // 反馈详情
    clickfankui(item) {
      this.clickinfo = item;
      this.dialogForminfo = true;
    },
    clickadd() {
      this.form = _.cloneDeep(defavalue);
      this.dialogFormVisible = true;
    },
    // 下载文件
    openenther(item) {
      window.open(item);
    },
    beforeAvatarUpload(file) {
      if (this.updateing) {
        return false;
      }
      this.form.filename = file.name;
      this.updateing = true;
      return true;
    },
    beforeremove() {
      this.updateing = false;
    },
    handleAvatarSuccess(res, file) {
      let data = res;
      console.log(data);
      if (data.status == 200) {
        let obj = data.data;
        this.form.fileurl = obj.file[0].fileTotalPath;
        console.log(this.form.fileurl);
      } else {
        this.$message.error(data.msg);
      }
      this.updateing = false;
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 去除空数据
          let datestr = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
          // 获取this.form.selectuser最后一个元素
          let userid = this.form.selectuser[this.form.selectuser.length - 1];
          let params = {
            ...this.form,
            taskDesc: this.form.context,
            startTime: datestr,
            userId: userid,
            creater: this.uid,
            content: this.form.context,
            endTime: dayjs(this.form.endTime).format("YYYY-MM-DD HH:mm:ss"),
          };
          console.log(params);

          save(params).then((res) => {
            if (res.status == 200) {
              this.$message.success("添加成功");
              this.dialogFormVisible = false;
              this.getdata();
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.filter-item {
  margin-left: 4px;
  margin-right: 20px;
}
.avaimg {
  width: 50px;
  height: 50px;
}
</style>

